//获取操作对象大盒子
var box = document.querySelector('.main .w')
console.log(box);
//获取cookie
var n1 = getCookie('name')
var ar1
//判断是否登录
if(n1){
    show()
}else{
    alert("你还未登录")
    //获取地址栏信息
    var url=location.href
    //跳转到登录页
    location='../02login/login.html?url='+url
}

function show(){
    //获取当前账号储存的数据
    ar1=localStorage.getItem(n1) || '[]';
    //把当前字符串转为对象
    ar1=eval('('+ar1+')')
    if(ar1.length>0){
         //检查当前数组中所有的is_select字段是否都等于1
       var bool=ar1.every(item=>{
        return item.is_select==1
    })
        //创建字符串，进行拼接
        //拼接头部
        var str =`
            <div class="main-head">
                <span>购物车（全部<span>${ar1.length}</span>）</span>
                <div>
                    <span>已选商品（不含运费）￥</span>
                    <span>${total()[1]}</span>
                </div>
            </div>
            
            <div class="main-box">
                <div class="main-top">
                    <ul>
                        <li>
                            <input type="checkbox" name="quan" ${bool?"checked":""}>全选
                        </li>
                        <li>商品</li>
                        <li>单价</li>
                        <li>数量</li>
                        <li>金额</li>
                        <li>操作</li>
                    </ul>
                </div>
        `
        //遍历数组
        ar1.forEach(item=>{
            //拼接商品部分
            str+=`
            <div class="main-uls">
                <ul>
                    <li class="check">
                    <input type="checkbox" name="xuan" ${item.is_select==1?"checked":''} index="${item.goods_id}"> 
                    </li>
                    <li>
                        <img src="${item.goods_small_logo}" alt="">
                        <p>${item.goods_name}</p>
                    </li>
                    <li>
                        ￥<span>${item.goods_price}</span>
                    </li>
                    <li>
                        <button type="button" index="${item.goods_id}" ${item.cart_number<=1?"disabled":''}>-</button>
                        <input type="text"  value="${item.cart_number}">
                        <button type="button" index="${item.goods_id}" ${item.cart_number>=item.goods_number?"disabled":''}>+</button>
                    </li>
                    <li>
                        ￥<span>${(item.goods_price*item.cart_number).toFixed(2)}</span>
                    </li>
                    <li index="${item.goods_id}">删除</li>
                </ul>
            </div>

            `
        })
        //拼接底部
        str+=`
        <div class="main-footer">                
            <ul class="footer-left">
                <li>
                    <input type="checkbox" name="quan" ${bool?"checked":""}>全选
                </li>
                <li>删除选中的商品</li>
                <li>移入收藏夹</li>
            </ul>

            <ul class="footer-right">
                <li>
                    已选择<span>${total()[0]}</span>件商品
                </li>
                <li>
                    合计（不含运费）：<span>￥${total()[1]}</span>
                </li>
                <li >
                <button class="pay" type="button">结算</button>
                </li>
            </ul>
          
        </div>
    </div>
        `
        //把拼接好的内容渲染到页面
        box.innerHTML=str
    }else{

        //创建字符串，拼接所有内容
       var str=`
       <h2>这个是一个购物车页 <a href="../05list/list.html" class="btn btn-info btn-md">返回列表页</a></h2>
       <div class="jumbotron">
           <h1>您的购物车空空如也</h1>
           <p>点击下方按钮快去选购吧! ^_^</p>
           <p><a class="btn btn-primary btn-lg" href="../01index/index.html" role="button">赶紧去逛逛吧</a></p>
       </div>
       `
       //把拼接好的内容渲染到大盒子中
       box.innerHTML=str
    }
}


//给大盒子绑定点击事件
box.onclick=function(e){
    //事件对象兼容
    var e = e || window.event
    //获取操作目标
    var tg=e.target || e.srcElement
    
      //加法
      if(tg.innerHTML == '+'){
        
       //获取当前按钮的id属性
       var id=tg.getAttribute('index');
       console.log(id);
       //遍历数组中所有元素
       ar1.forEach(item=>{
           //判断当前遍历的元素id是否等于按钮所对应的id
           if(item.goods_id==id){
               item.cart_number++
           }
       })
       //把操作结果重新放在localStorage中
       localStorage.setItem(n1,JSON.stringify(ar1))
       //重新调用显示数据的函数
       show()
       btn()
    }

    //减法
    if(tg.innerHTML == "-"){
        //获取input的value值
        var id=tg.getAttribute('index');
        console.log(id);
       //遍历数组中的所有元素
       ar1.forEach(item=>{
           //判断当前遍历的元素id是否等于按钮对应的id
           if(item.goods_id==id){
               item.cart_number--
           }
       })
       //把操作结果重新放在localStorage中
       localStorage.setItem(n1,JSON.stringify(ar1))
       //重新调用显示数据的函数
       show()
       btn()
    }

    //删除
    if(tg.innerHTML == '删除'){
        
       //获取当前按钮的id
       var id=tg.getAttribute('index')
       console.log(id);
       var b =confirm("确定删除这个宝贝吗？")
       if(b){
           //过滤数组元素的id等于当前按钮id
            ar1=ar1.filter(item=>{
            return item.goods_id!=id
        })
         //把操作结果重新存放在localStorage中
         localStorage.setItem(n1,JSON.stringify(ar1))
       }
        //重新调用显示数据的函数
        show()
        btn()
    }

    //删除选中的商品
    if(tg.innerHTML == "删除选中的商品"){
         //获取当前选中框的id
       var id=tg.getAttribute("index")
       var b = confirm("确定删除选中的商品吗")
       if(b){
        //过滤删除已选择的商品
            ar1=ar1.filter(item=>{
                return item.is_select!=1
            })
       }
        //把操作结果重新存放在localStorage中
        localStorage.setItem(n1,JSON.stringify(ar1))
        //重新调用显示数据的函数
        show()
        btn()
    }

    //全选
    if(tg.name=="quan"){
        //遍历数组中所有商品
        ar1.forEach(item=>{
            //判断全选框是否被选中
            if(tg.checked){
                //让商品中的is_select字段为1
                item.is_select=1
            }else{
                item.is_select=0
            }
        })
        //把操作结果重新存放在localStorage中
        localStorage.setItem(n1,JSON.stringify(ar1))
        //重新调用显示数据的函数
        show()
        btn()
    }

  

    //选中框
    if(tg.name == 'xuan'){
       //获取当前选中框的id
       var id=tg.getAttribute("index")
       //遍历数组元素
       ar1.forEach(item=>{
           //判断当前元素的id是否等于选中框的id
           if(item.goods_id==id){
               //判断当前选中框是否被选中
               if(tg.checked){
                   item.is_select=1
               }else{
                   item.is_select=0
               }
           }
       })
       //把操作结果重新存放在localStorage中
       localStorage.setItem(n1,JSON.stringify(ar1))
       //重新调用显示数据的函数
       show()
       btn()
    }

     //结算
     if(tg.innerHTML=="结算"){
        //给定确认框
        if(confirm("你确定要购买吗？")){
            alert("已支付："+total()[1])
            //删除已购买的商品
            ar1=ar1.filter(item=>{
                return item.is_select!=1
            })
            //把操作结果重新存放在localStorage中
            localStorage.setItem(n1,JSON.stringify(ar1))
            //重新调用显示数据的函数
            show()
            btn()
        }
    }


}


function total(){
    //定义m为数量总和，sum为小计总和
    var m = 0
    var sum = 0
    //遍历本地储存的数组
    ar1.forEach(item=>{
        //判断当前商品是否被选中
        if(item.is_select==1){
            //累积所有商品数量
            m+=item.cart_number
            //累积所有选中商品的小计
            sum+=item.cart_number*item.goods_price      
        }  
    })
    return [m,sum.toFixed(2)]

}


function btn(){
    
    var a = $('.main-head').children(':eq(1)').children(':eq(1)').html()
    console.log(a);
    if(a>0){
        $('.pay').css('background-color','#FF5000').css('cursor','pointer')
    }else{
        $('.pay').css('background-color','#aaa').css('cursor','not-allowed')
    }

}
btn()